<script lang="ts">
  import {
    EDGE_TYPE_BEZIER,
    EDGE_TYPE_SMOOTH_STEP,
    EDGE_TYPE_STEP,
    EDGE_TYPE_STRAIGHT,
    update_edge_basic,
    type DrawEdgeInfo,
  } from "$lib/api/board/board_draw";
  import { get_user_session } from "$lib/api/user";
  import { request } from "$lib/utils/request";
  import { drawStore } from "../store.svelte";

  interface Props {
    edge: DrawEdgeInfo;
  }
  let props: Props = $props();

  const secondaryColors: string[] = [
    "var(--color-secondary-50)",
    "var(--color-secondary-100)",
    "var(--color-secondary-200)",
    "var(--color-secondary-300)",
    "var(--color-secondary-400)",
    "var(--color-secondary-500)",
    "var(--color-secondary-600)",
    "var(--color-secondary-700)",
    "var(--color-secondary-800)",
    "var(--color-secondary-900)",
    "var(--color-secondary-950)",
  ];
  const tertiaryColors: string[] = [
    "var(--color-tertiary-50)",
    "var(--color-tertiary-100)",
    "var(--color-tertiary-200)",
    "var(--color-tertiary-300)",
    "var(--color-tertiary-400)",
    "var(--color-tertiary-500)",
    "var(--color-tertiary-600)",
    "var(--color-tertiary-700)",
    "var(--color-tertiary-800)",
    "var(--color-tertiary-900)",
    "var(--color-tertiary-950)",
  ];

  let edgeType = $state(props.edge.basic_info.edge_type);
  let strokeWidth = $state(props.edge.basic_info.stroke_width);
  let color = $state(props.edge.basic_info.color);
  let hasStartArrow = $state(props.edge.basic_info.has_start_arrow);
  let hasEndArrow = $state(props.edge.basic_info.has_end_arrow);
  let label = $state(props.edge.basic_info.label);

  let hasChange = $derived(
    edgeType != props.edge.basic_info.edge_type ||
      strokeWidth != props.edge.basic_info.stroke_width ||
      color != props.edge.basic_info.color ||
      hasStartArrow != props.edge.basic_info.has_start_arrow ||
      hasEndArrow != props.edge.basic_info.has_end_arrow ||
      label.trim() != props.edge.basic_info.label.trim()
  );

  function reset() {
    edgeType = props.edge.basic_info.edge_type;
    strokeWidth = props.edge.basic_info.stroke_width;
    color = props.edge.basic_info.color;
    hasStartArrow = props.edge.basic_info.has_start_arrow;
    hasEndArrow = props.edge.basic_info.has_end_arrow;
    label = props.edge.basic_info.label;
  }

  async function updateEdgeBasic() {
    const sessionId = await get_user_session();
    await request(
      update_edge_basic({
        session_id: sessionId,
        board_id: drawStore.boardInfo?.board_id ?? "",
        draw_id: drawStore.drawId,
        edge_key: props.edge.edge_key,
        basic_info: {
          edge_type: edgeType,
          stroke_width: strokeWidth,
          color: color,
          has_start_arrow: hasStartArrow,
          has_end_arrow: hasEndArrow,
          label: label.trim(),
          llm_link: false,
        },
      })
    );
  }
</script>

<main class="pt-0 pl-2 pr-2">
  <label class="label">
    <span class="label-text">标签</span>
    <input
      bind:value={label}
      type="text"
      placeholder="请输入连线标签"
      class="input rounded-none bg-surface-100-900"
    />
  </label>
  <label class="label">
    <span class="label-text">类型</span>
    <select
      class="select rounded-none bg-surface-100-900"
      bind:value={edgeType}
    >
      <option value={EDGE_TYPE_BEZIER}>曲线</option>
      <option value={EDGE_TYPE_SMOOTH_STEP}>平滑折线</option>
      <option value={EDGE_TYPE_STEP}>折线</option>
      <option value={EDGE_TYPE_STRAIGHT}>直线</option>
    </select>
  </label>
  <label class="label">
    <span class="label-text">线宽</span>
    <select
      class="select rounded-none bg-surface-100-900"
      bind:value={strokeWidth}
    >
      <option value={1}>1</option>
      <option value={2}>2</option>
      <option value={3}>3</option>
      <option value={4}>4</option>
      <option value={5}>5</option>
    </select>
  </label>
  <label class="label flex gap-x-2 items-center mt-2">
    <input
      type="checkbox"
      class="checkbox bg-surface-100-900"
      bind:checked={hasStartArrow}
    />
    <span>开始箭头</span>
  </label>
  <label class="label flex gap-x-2 items-center mt-2">
    <input
      type="checkbox"
      class="checkbox bg-surface-100-900"
      bind:checked={hasEndArrow}
    />
    <span>结束箭头</span>
  </label>
  <div class="label">
    <span class="label-text">颜色</span>
    <div class="flex flex-wrap gap-2">
      {#each [...secondaryColors, ...tertiaryColors] as newColor}
        <div
          role="none"
          class={`w-[20px] h-[20px] cursor-pointer ${newColor == color ? "border-4" : "border-1"} border-primary-500`}
          style="background-color: {newColor};"
          onclick={() => (color = newColor)}
        ></div>
      {/each}
    </div>
  </div>
</main>

{#if hasChange}
  <footer class="flex justify-end gap-4 m-[10px]">
    <button type="button" class="btn preset-tonal" onclick={() => reset()}
      >重置</button
    >
    <button
      type="button"
      class="btn preset-filled-primary-900-100"
      onclick={() => updateEdgeBasic()}
    >
      保存
    </button>
  </footer>
{/if}
